<template>
  <page-header-wrapper>
    <a-card class="auto-reply-card">
      <gz-official-account-list v-model:value="vdata.officialAccount" :isDefault="true">
        <div>
          <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {} }">
            <GzTextUp v-model:value="searchData['activityTemplateNo']" placeholder="活动模板编号" />
          </GzSearchForm>
          <a-skeleton v-if="!vdata.officialAccount" :rows="6" />
          <GzTable
            v-else
            ref="infoTableRef"
            :init-data="true"
            :req-table-data-func="reqTableDataFunc"
            :pageSize="10"
            :pageSizeOptions="['5','10','15','20']"
            :table-columns="tableColumns"
            :search-data="searchData"
            row-key="agentNo"
            :scrollX="800"
          >
            <!-- <template #topBtnSlot>
                <a-button v-if="$access('ENT_OFFICIAL_ACCOUNT_MATERIAL_ADD')" type="primary" @click="addOrEditFunc(false)">
                  <plus-outlined />新建
                </a-button>
              </template> -->
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'imgUrl'">
                <template v-if="record.imgUrl">
                  <img class="ant-image-img" :src="record.imgUrl" referrerpolicy="no-referrer" @click="previewFileFunc(record.imgUrl)">
                </template>
                <template v-else>
                  <img src="@/assets/svg/default-img.svg" alt="">
                </template>
              </template>
              <template v-if="column.key === 'operation'">
                <!-- 操作列插槽 -->
                <GzTableColumns>
                  <!-- <a-button v-if="$access('ENT_OFFICIAL_ACCOUNT_MATERIAL_DEL')" type="link" @click="impFunc(record)">导入活动素材库</a-button> -->
                  <a-button v-if="$access('ENT_ACTIVITY_MATERIAL_DEL')" type="link" danger @click="delFunc(record.mediaId)">删除</a-button>
                </GzTableColumns>
              </template>
            </template>
          </GzTable>
        </div>
      </gz-official-account-list>
    </a-card>
    <a-modal v-model:visible="vdata.visible" width="30%" title="请输入模板编号" @cancel="vdata.visible = false" @ok="confirmSubmit">
      <a-form-item class="table-search-item" label="活动模板编号">  
        <a-input v-model:value="vdata.activityTemplateNo" label="活动模板编号" :placeholder="'请输入模板编号'" />
      </a-form-item>
    </a-modal>
  </page-header-wrapper>
</template>
  
  <script setup lang="ts">
  import { nextTick, reactive, ref, watch, getCurrentInstance, } from 'vue'
  import {$apiOfficialReplyGetMaterialList,$apiImageTextList,$apiOfficialMediaDeleteMaterial,$apiOfficialMediaImportMaterialImg} from '@/api/proxy/officialManage/materialManage/index'
//   import AddOrEdit from './AddOrEdit.vue'
  import {$apiOfficialMediaGetActivityMaterialList} from '@/api/activityManage/activityMaterial/index'
  import storage from 'store'
  const { $access, $infoBox, $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
  const addOrEditRef = ref()
  const searchData = ref({})
  const infoTableRef = ref()
  // 数据源
  const vdata = reactive({
    type: 'image', // 回复类型
    officialAccount: null, // 当前选中的公众号
    visible:false,
    activityTemplateNo:'',
    mediaId:'',
    url:''
  } as any)
  
  // 素材类型
  const materialType = [
    { key: 'image', value: '图片', icon: 'file-image-outlined' },
    // { key: 'voice', value: '语音', icon: 'phone-outlined' },
    // { key: 'video', value: '视频', icon: 'play-square-outlined' },
    // { key: 'thumb', value: '缩略图', icon: 'picture-outlined' },
    // { key: 'news', value: '图文', icon: 'file-image-outlined' },
  ]
  
  // 表格列
  let tableColumns = reactive([
    { key: 'activityTemplateNo', title: '活动模板编号', dataIndex: 'activityTemplateNo'  },
    { key: 'mediaId', title: '素材编号', dataIndex: 'mediaId' },
    { key: 'imgUrl', title: '素材图片', dataIndex: 'imgUrl' },
    { key: 'operation', title: '操作',  fixed: 'right', align: 'center' }
  ])
  /**
   * 列表搜索
   */
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
  /**
   * 请求table接口数据
   * @param params  查询条件
   */
  function reqTableDataFunc(params: any) {
    console.log(params,'params55555')
    if(vdata.type === 'news'){
        console.log('调用表格数据5555')
   return $apiImageTextList({ appid: vdata.officialAccount.appId,  offset: 0, count: 10,...params,...searchData }).then(res => {
          return { ...res, total: res.totalCount, records: res.items }
      })
    }else{
        console.log(vdata.officialAccount,'8899999')
    return $apiOfficialMediaGetActivityMaterialList({ officialAppId: vdata.officialAccount.appId, type: vdata.type,...params }).then(res => {
                    console.log(res,8889999999)
            return { ...res, total: res.totalCount, records: res.records }
        })
    }
  }
  /**
   * 监听公众号变化
   */
  watch(() => vdata.officialAccount, (newVal, oldVal) => {
    if(!oldVal) return
    infoTableRef.value.refTable(true)
  })
  
  
  // 导入
  const impFunc = (record) =>{
    console.log(record,'record')
    vdata.mediaId = record.mediaId
    vdata.activityTemplateNo = ''
    vdata.url = record.url
    vdata.visible = true
  
    // console.log(record,'导入')
    // $apiOfficialMediaImportMaterialImg({}).then(res=>{
  
    // })
  }
  
  // 确认
  const confirmSubmit = () =>{
    console.log(1111)
    $apiOfficialMediaImportMaterialImg({officialAppId:vdata.officialAccount.appId,mediaId:vdata.mediaId,activityTemplateNo:vdata.activityTemplateNo,url:vdata.url}).then(res=>{
      console.log(res,555555)
      // if(res.code ==0){
        $infoBox.message.success(res)
      // }
    })
    vdata.visible = false
  }
  
  /**
   * 新增
   */
  function addOrEditFunc(mediaId){
    addOrEditRef.value.show(vdata.type, vdata.officialAccount.appId, mediaId)
  }
  /**
   * 删除
   */
  function delFunc(mediaId){
    $infoBox.confirmDanger('确认删除？', '请确认是否删除当前素材？', () => {
      $apiOfficialMediaDeleteMaterial({ mediaId, appid: vdata.officialAccount.appId }).then(res => {
        $infoBox.message.success('删除成功')
        infoTableRef.value.refTable()
      })
    })
  }
  // 预览图片
  function previewFileFunc(src){
    if(src){
      $viewerApi({images: [src]})
    }
  }
  
  </script>
  
  <style scoped>
    .auto-reply-card{
      .inner{
        padding: 24px;
      }
    }
  
  
    /* 样式穿透 */
    .ant-image-img{
      width: 80px;
      height: 80px;
      object-fit: cover;
    }
  </style>